<template>
  <div class="main-box">
    <!-- 头部区域 -->
    <van-search
      class="search-form"
      v-model="dishNameKey"
      show-action
      shape="round"
      background="#4fc08d"
      placeholder="请输入搜索关键词"
      @search="goSearch"
    >
      <template #action>
        <div @click="goSearch">搜索</div>
      </template>
    </van-search>
    <div class="empty"></div>
    <!-- 导入，注册，并使用 DishInfo 组件 -->
    <!-- 在使用组件的时候，如果某个属性名是“小驼峰”形式，则绑定属性的时候，建议改写成“连字符”格式。例如： -->
    <!-- cmtCount 建议写成 cmt-count -->
    <van-pull-refresh
      v-model="isLoading"
      :disabled="finished"
      @refresh="onRefresh"
    >
      <van-list
        class="info-list"
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <DishInfo
          class="dish-info"
          v-for="item in dishlist"
          :key="item.id"
          :did="item.id"
          :dishName="item.dishName"
          :price="item.price"
          :cover="item.urls"
          :labels="item.labels"
        ></DishInfo>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
// 按需导入 API 接口
import { getDishListAPI } from "@/api/dishAPI.js";
// 导入需要的组件
import DishInfo from "@/components/Dish/DishInfo.vue";
import router from "@/router";

export default {
  name: "Home",
  data() {
    return {
      // // 搜索关键词
      dishNameKey: "",
      queryForm: {
        size: 10,
        current: 1,
      },
      // 菜品的数组
      dishlist: [],
      // 是否正在加载下一页数据，如果 loading 为 true，则不会反复触发 load 事件
      // 每当下一页数据请求回来之后，千万要记得，把 loading 从 true 改为 false
      loading: true,
      // 所有数据是否加载完毕了，如果没有更多数据了，一定要把 finished 改成 true
      finished: false,
      // 是否正在下拉刷新
      isLoading: false,
    };
  },
  created() {
    this.initDishList();
  },
  methods: {
    // 封装获取文章列表数据的方法
    async initDishList(isRefresh) {
      // 发起 GET 请求，获取文章的列表数据
      // const { data: res } = await getDishListAPI(this.page, this.limit);
      const {
        data: {
          success = false,
          errorMsg = "",
          data: { rows, totalCount },
          total = 0,
        },
      } = await getDishListAPI(this.queryForm);
      if (isRefresh) {
        // 证明是下拉刷新；新数据在前，旧数据在后
        // this.dishlist = [新数据在后, 旧数据在前]
        this.dishlist = [...rows, ...this.dishlist];
        this.isLoading = false;
      } else {
        // 证明是上拉加载更多；旧数据在前，新数据在后
        // this.dishlist = [旧数据在前, 新数据在后]
        this.dishlist = [...this.dishlist, ...rows];
        this.loading = false;
      }
      if (rows.length === 0) {
        // 证明没有下一页数据了，直接把 finished 改为 true，表示数据加载完了！
        this.finished = true;
      }
    },
    // 只要 onLoad 被调用，就应该请求下一页数据
    onLoad() {
      console.log("触发了 load 事件！");
      // 1. 让页码值 +1
      this.queryForm.current++;
      // 2. 重新请求接口获取数据
      this.initDishList();
    },
    // 下拉刷新的处理函数
    onRefresh() {
      console.log("触发了下拉刷新！");
      // 1. 让页码值 +1
      this.queryForm.current++;
      // 2. 重新请求接口获取数据
      this.initDishList(true);
    },
    goSearch() {
      this.$router.push({
        path: "/dish-search",
        query: { keyWord: this.dishNameKey },
      });
    },
  },
  // 注册组件
  components: {
    DishInfo,
  },
};
</script>

<style lang="less" scoped>
.main-box {
  .search-form {
    position: fixed;
    width: 100%;
    z-index: 1;
    overflow: hidden;
  }
  .empty {
    height: 54px;
    width: 100%;
  }
}
.info-list {
  background-color: #f8f8f8;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.dish-info {
  flex: 0 0 49%;
  margin-bottom: 10px;
}
</style>